<template>
  <div>
    <!-- HelloWorld{{myName}}<br/> -->

    <!-- <input type="text" v-model="myText"><button @click="showInfo">show</button>
    <ul>
      <li v-for="item in myList" :key="item">{{item}}</li>
    </ul> -->

    <!-- 引入其他子组件 -->
    <!-- 演示通信   父->子  -->
    <!-- 把:去掉,会报错,此时false为字符串,并不是Boolean类型 -->
    <!-- <navbar myName='左边' :myShow='false' @events = 'checkShow'></navbar> -->
    <!-- 效果   点击里面的然后让sidebar隐藏消失 子传父   events 可以自定义 -->
    <!-- <sidebar v-show="isShow"></sidebar> -->

    <!-- 指令 -->
    <!-- <div v-hello>11</div> -->

    <!-- 过滤 -->
    <!-- <img :src="myUrl | myFilter" > -->

    <!-- 声明式导航  同源可以省略http:xxx-->
    <!-- <ul>
      <li><a href="/films">电影</a></li>
      <li><a href="/Center">我的中心</a></li>
    </ul> -->

    <!-- Vue声明式导航   -->
    <!-- 直接在网址上面输入也会高亮显示 -->

    <!-- <ul> -->
    <!-- <li>   <router-link to="/films">导航-电影</router-link></li> -->

    <!-- 之前的, 自动添加的---->
    <!-- class="router-link-exact-active router-link-active -->
    <!-- 变化后的 -->
    <!-- class="router-link-exact-active huhunactive" -->
    <!-- 变换颜色 -->

    <!-- <li>   <router-link to="/films" active-class="huhunactive">vue-电影</router-link></li>
      <li>   <router-link to="/Center" active-class="huhunactive">vue-我的中心</router-link></li>
       -->
    <!-- </ul> -->

    <!-- 老写法  创建li-->
    <!-- <router-link to="/films" active-class="huhunactive" tag="li">vue-热映</router-link>
    <router-link to="/Center" active-class="huhunactive" tag="li">vue-中心</router-link> -->

    <!-- to可以动态绑定的   :to   这几个参数是固定的 -->
    <!--     <router-link to="/films" custom v-slot="{ navigate, isActive }">
      <li @click="navigate" :class="isActive ? 'huhunactive' : ''">
        电影~~>{{ isActive }}
        <!~~ <ul>
          <li>1</li>
          <li>1</li>
          <li>2</li>
        </ul> ~~>
      </li>
    </router-link> -->

    <!-- <router-link to="/Center" custom v-slot="{ navigate, isActive }">
      <li @click="navigate" :class="isActive ? 'huhunactive' : ''">
        中心~~>{{ isActive }}
      </li>
    </router-link>

    <router-link to="/order" custom v-slot="{ navigate, isActive }">
      <li @click="navigate" :class="isActive ? 'huhunactive' : ''">
        我的订单{{ isActive }}
      </li>
    </router-link>

    <router-link to="/fileSwiper" custom v-slot="{ navigate, isActive }">
      <li @click="navigate" :class="isActive ? 'huhunactive' : ''">
        我的Swiper{{ isActive }}
      </li>
    </router-link> -->

    <table-bar></table-bar>

    <!-- 路由容器   --相当于插槽  这个时候网址里面输入films 就会加载films组件-->
    <router-view></router-view>

    <!--     <div v-if="myInfo">
      <!~~ 当为真的时候,才会创建 ~~>
      {{myInfo.xx}}   要不然这里会直接报错,因为myInfo是null
    </div> -->

    <!-- 动态style 里面可以放对象 -->
    <div :style="{
      backgroundImage : 'url('+myInfo.image+')'
    }">
    </div>

<!-- 动态class和静态class可以并存 -->
    <div class="mm" :class="kk">

    </div>

    



  </div>
</template>

<script>
// 引入子组件  导入
import navbar from "./components/Navbar.vue";
// 导入的相当于是一个大对象

// 哪里调用,哪里引用  --模块化开发
// import Vue from 'vue'

// // 还需要注册进去,上面的写法,只相当于Vue.component('xx',{大括号内的内容})
// Vue.component('navbar',navbar)

// @别名,相当于是src,永远指向src路径,下面可以简写为   百度可以了解更多别名设置
// import sidebar from './components/Sidebar.vue'
import sidebar from "@/components/Sidebar.vue";

import Vue from "vue";

import axios from "axios";

import tableBar from "@/components/tableBar.vue";


// 导入方法模块
// 演示使用第一种https.js
import http from "@/utils/https.js";

// http此时是一个大对象
// http.httpB().then(res=> res.data)

// 第二种演示  跟axios使用方法一致
http({
  // 会自动拼接到前面baseUrl后面的
  url: "xx",
  // header 也会自动拼接到前面的heaer后面的
  headers: {},
});


// comont工具
import moment from "moment"

// better-scroll
import better from 'better-scroll';

// 当前时间  可以有各种格式,详细参考moment.js官网
console.log(moment().format())

// 指令
Vue.directive("hello", {
  inserted(el, binding) {
    console.log("=====>", el);
    console.log(binding);
  },
});
// 过滤写法
Vue.filter("myFilter", (myDate) => {
  return myDate;
});
// es6导出语法
export default {
  data() {
    return {
      myName: "张三",
      myText: "",
      myList: [],
      isShow: true,
      myUrl: "mm",
      // 可以用来接收大对象,然后下面可以对其赋值
      myInfo: null,
    };
  },
  methods: {
    showInfo() {
      console.log(this.myText.length);
      if (this.myText.length == 0) {
      } else {
        this.myList.push(this.myText);
      }
    },
    checkShow() {
      this.isShow = !this.isShow;
    },
  },

  mounted() {
    let url =
      "/ajax/moreComingList?token=&movieIds=1450064,1369917,1048274,1377834,1397016,1433654,1355899,1301026,1306855,1356063&optimus_uuid=B470BCD02EBC11EDAA344570B7395F41B879A3A2BEE34DC39BFA680E9B4099D1&optimus_risk_level=71&optimus_code=10";
    let urls =
      "/huhu/ajax/moreComingList?token=&movieIds=1450064,1369917,1048274,1377834,1397016,1433654,1355899,1301026,1306855,1356063&optimus_uuid=B470BCD02EBC11EDAA344570B7395F41B879A3A2BEE34DC39BFA680E9B4099D1&optimus_risk_level=71&optimus_code=10";

    axios.get(url).then((res) => {
      console.log("url---->", res.data);
    });
    // axios.get(urls).then(res=>{
    //   console.log('urls--->',res.data)
    // })
  },

  // 局部组件,这样写即可,上面注释掉的是全局组件
  components: {
    // navbar:navbar        es6可以简写成下面这种形式
    // 组件名称:大对象
    // 'navbar':navbar   加不加效果相同
    navbar,
    sidebar,
    tableBar,
  },
};

// hash路由
// 可以监听到路径的变化，当路径变化的时候，就会执行
window.onhashchange = () => {
  console.log("111", location.hash);
};

// history 路由切换(路径)
window.onpopstate = () => {};
</script>

<style lang="scss">
/* ul li{
  background: red;
 } */

//  相当于自定义的变量,代表宽度
$width: 300px;

//  ul{
//   li{
//     background: yellow;
//     width: $width;
//   }
//  }
//  vue路由会自动给选中的添加上这个类
// class="router-link-exact-active router-link-active"
// 实现选中之后颜色变化->高亮
// .huhunactive {
//   color: red;
// }
.kk {
  width: 46.875rem;
}
* {
  margin: 0px;
  padding: 0px;
}
ul {
  li {
    list-style: none;
  }
}
html,
body {
  height: 100%;
}
</style>
